<template>
	<div class="index-con">
    <div class="index-header" v-if="banner.length>0">
      <div class="swiper-div">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in banner" :key="item">
              <img :src="item" />
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination02"></div>
    </div>
    <div class="chat-list" v-if="conversationList.length>0&&nohasim!=1">
      <!-- {{conversationList.length}} -->
      <!-- {{conversationList[2]}} -->
      <template v-for="item in conversationList">
        <conversation-item :conversation="item" :key="item.conversationID" :converList02="converList02" v-if="item.type !== TIM.TYPES.CONV_SYSTEM" />
      </template>
    </div>
    <div class="chat-empty" v-else-if="isSDKReady||nohasim==1||conversationList.length<=0">
      <!-- <img src="@/assets/image/chat-empty.png" /> -->
    </div>
    
    <div class="healcoin-dialog"  v-if="isShowDialog">
      <div>
        <img src="@/assets/image/ic_tishimiao@3x.png" class="head-bjimg" />
        <!-- <img src="../../../img/common/bg_modal_close.png" class="dialog-close" @click="coinduihuan=false" /> -->
        <button @click="fnSure">确定</button>
        <h5>配置专属健康团队</h5>
        <div class="text-con">
          <p>您的专属健康团队<br>
           会在24小时内配置完成<br>
           请耐心等待
          </p>
        </div>
      </div>
    </div>


    <!-- <div class="tab-footer">
      <div class="tab-item tab01" @click="fnpage(1)">今日</div>
      <div class="tab-item tab02 active">专业团队</div>
      <div class="tab-item tab03" @click="fnpage(3)">我的</div>
    </div> -->
	</div>
</template>
<script>
import ConversationItem from '@/components/pages/conversation-item'
import Swiper from 'swiper';
import { mapState } from 'vuex'
import { apibanner, apiplanprocess } from '@/api/im/api'
export default {
  title: '米洛健康',
  data() {
    return {
      isShowDialog: false,
      curYMD: '', //MYD
      status:'loading', //管理师分配中
      isCheckouting: false, // 是否正在切换会话
      banner: [],
      hmStatus: 0
      
    }
  },
  components: { 
    ConversationItem
  },
  computed: {
    ...mapState({
      isSDKReady: state => state.user.isSDKReady,
      conversationList: state => state.conversation.conversationList,
      currentConversation: state => state.conversation.currentConversation,
      converList02: state => state.conversation.converList02,
      nohasim: state => state.conversation.nohasim
    })
  },
  created() {
    var self = this;
    var _n = new Date();
    self.curYMD = ''+_n.getFullYear()+(_n.getMonth()+1)+_n.getDate()
    apibanner({
      profile_id: localStorage.getItem('profileId'),
      token: localStorage.getItem('token'),
    }).then(res => {
      self.banner = res.data||[];
      if(self.banner.length>1){
        self.fnbanner();
      }
    })
  },
  activated(){
    this.tim.setMessageRead({ conversationID: this.currentConversation.conversationID })
  },
  mounted(){
    document.title="米洛健康"
    this.$store.dispatch('checkoutConversation','')
    // 获取管理师分配状态 
    this.getHmStatus();
  },
  watch:{
    '$route' (to, from) { //监听路由是否变化
      // console.log("tototototototototoototot")
      // console.log(from)
      if(to.path == '/im/index' && from.query.status == 2){
          location.reload()
      }
    }
  },
  methods: {
    getHmStatus(){
      var self = this;
      apiplanprocess({
        profile_id: localStorage.getItem('profileId'),
        token: localStorage.getItem('token'),
      }).then(res=>{
         console.log(">>>getHmStatus>>>>")
         console.log(res)
         if(res.data instanceof Array){
           self.hmStatus =res.data[0].hmStatus;
           self.$store.commit('hmstatusFn', self.hmStatus)
           if(self.hmStatus == 1 || self.hmStatus == 3){ // 1：未分配，2：已分配，3：分配失败
              self.getDialog();
           }
         }
      })
    },
    getDialog(){
      let status =  localStorage.getItem('temp_date');
      if(status != this.curYMD){
         this.isShowDialog = true;
      }
    },
    fnSure(){
      this.isShowDialog = false;
      let n = new Date();
      let ymd =''+ n.getFullYear()+(n.getMonth()+1)+n.getDate();
      localStorage.setItem('temp_date',ymd)
    },
    fnbanner(){
      var self = this;
      self.$nextTick(function(){
        new Swiper ('.swiper-container', {
          loop: true,
          autoplay: true,
          pagination:{
            el:'.swiper-pagination02',
            // clickable:true,
          }
        })
      })
    },
    fnshow(){
      this.$toast('aaaaaaaaa')
    },
    fnpage(type){
      if(type==1){
        this.$wx.miniProgram.redirectTo({ url: '/pages/index/index'})
      }else if(type==3){
        this.$wx.miniProgram.redirectTo({ url: '/pages/user/user'})
      }
      
    }
  }
}
</script>
<style lang="scss" scoped>
@import'../assets/css/swiper.min.css';
.healcoin-dialog{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  display: block;
  background: rgba(0, 0, 0, 0.7);
  &>div{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
    text-align: center;
    height: 6.186667rem;
    width: 7.333333rem;
    background: white;
    border-radius: .213333rem;
    padding: 0 .413333rem;
    h5{
      margin-top: 1.6rem;
      font-size: .586667rem;
      line-height: .8rem;
      color: #877FFE;
    }
    .text-con{
      margin-top: .56rem;
      width: 100%;
      height: 2.386667rem;
      border-radius: .213333rem;
      p{
        line-height: .6rem;
        font-size: .4rem;
        color: #535353;
      }
      h4{
        margin: 0;
        margin-top: .24rem;
        line-height: .586667rem;
        font-size: .426667rem;
        color: #3D3D3D;
      }
    }
    .head-bjimg{
      width: 2.533333rem;
      height: 2.133333rem;
      position: absolute;
      top: -1.013333rem;
      left: 50%;
      margin-left: -1.266667rem;
    }
    .dialog-close{
      width: .933333rem;
      height: .933333rem;
      position: absolute;
      top: -1.2rem;
      right: 0px;
    }
    &>button{
      border: none;
      outline: none;
      width: 3.293333rem;
      height: 1.093333rem;
      position: absolute;
      bottom: -1.813333rem;
      left: 50%;
      margin-left: -1.546667rem;
      background: #877FFE;
      border-radius: .546667rem;
      color: white;
      font-size: .48rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.index-con{
  // padding: .56rem .493333rem 1.92rem;
  height: 100%;
  overflow-y: auto;
  padding: .56rem .493333rem;
  background-image: linear-gradient(0deg, rgba(252,252,252,0.50) 14%, #F7F7F7 100%);
  .index-header{
    width: 100%;
    position: relative;
    .swiper-div{
      width: 100%;
      overflow: hidden;
      border-radius: .213333rem;
    }
    .swiper-pagination02{
      margin-top: .16rem;
      width: 100%;
      padding: 0 .466667rem;
      // height: .106667rem;
      text-align: center;
      /deep/ .swiper-pagination-bullet{
        width: .106667rem;
        height: .106667rem;
        display: inline-block;
        border-radius: 100%;
        background: #C5C5C5;
        margin: 0 .106667rem;
        &.swiper-pagination-bullet-active {
          background: $acolor ;
        }
      }
    }
    .swiper-container{
      width: 100%;
      height: 4.96rem;
      margin: 0;
      overflow: visible;
      .swiper-slide{
        width: 100%;
        height: 4.96rem;
        position: relative;
        img{
          width: 100%!important;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  .chat-list{
    margin-top: .2rem;

  }
  .chat-empty{
    padding-top: .56rem;
    img{
      width: 100%;
    }
  }
  .tab-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    height: 1.306667rem;
    width: 100%;
    z-index: 50;
    box-shadow: 0 0 .093333rem 0 rgba(0,0,0,0.09);
    display: flex;
    justify-content: space-around;
    align-items: center;
    .tab-item{
      width: 30%;
      height: 1.306667rem;
      padding-top: .86rem;
      font-size: .24rem;
      color: #9E9E9E;
      text-align: center;
      &.tab01{
        background: url('../assets/image/ic_home_hui@3x.png') no-repeat center .08rem;
        background-size: .666667rem .666667rem;
      }
      &.tab02{
        background: url('../assets/image/ic_team_hui@3x.png') no-repeat center .08rem;
        background-size: .666667rem .666667rem;
      }
      &.tab03{
        background: url('../assets/image/ic_me_hui@3x.png') no-repeat center .08rem;
        background-size: .666667rem .666667rem;
      }
      &.active{
        color: $acolor;
        &.tab01{
          background: url('../assets/image/ic_home_zi@3x.png') no-repeat center .08rem;
          background-size: .666667rem .666667rem;
        }
        &.tab02{
          background: url('../assets/image/ic_team_zi@3x.png') no-repeat center .08rem;
          background-size: .666667rem .666667rem;
        }
        &.tab03{
          background: url('../assets/image/ic_me_zi@3x.png') no-repeat center .08rem;
          background-size: .666667rem .666667rem;
        }
      }
    }
  }
}
</style>